<template>
  <div >
    <van-popup v-model="visible" position="bottom" :overlay="true" style="background-color: transparent"
               :close-on-click-overlay="false" >
      <div class="dialog-con">
        <img :src="getIcon('attr_close')" class="img-close" @click="dismiss">
        <div v-for="(item,index) in sysList" :key="index" class="item" @click="onItemClick(index)">
          <span v-text="item.name"></span>
          <img :src="getIcon('arrow_right')" class="img-icon">
        </div>
      </div>
      <div class="space"></div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'dialog-sys-pick',

    data() {
      return {
        visible: false
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      sysList: {
        required: true,
        type: Array
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.iconImg + icon + '.svg';
      },
      show() {
        this.visible = true;
      },
      dismiss() {
        this.visible = false;
      },
      onItemClick(index) {
        this.$emit('onItemClick', index);
        this.dismiss();
      }
    },
    computed: {},
    watch: {
      // 监听具体数据变化，并做相应的处理
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .dialog-con
    background-color #f8f8f8
    flex-y()
    border-top-left-radius 4vw
    border-top-right-radius 4vw

  .img-close
    width vw(20)
    align-self flex-end
    margin 15px 20px 10px 0

  .img-icon
    width 4vw
  .item
    box-sizing border-box
    flex-x()
    height vw(45)
    width vw(350)
    border-radius vw(22.5)
    padding 0 30px
    background-color white
    margin 5px 0

</style>
